<template>
  <view class="zjl_index ">

    <view class="zjl_index_guide">
      <image src="../../static/index.png" mode="widthFix" class="w100" />

    </view>

    <view class="zjl_index_search">
      <view class="u-demo-block__content">
        <!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
        <!-- #ifndef APP-NVUE -->
        <u-input placeholder="请输入创作者口令" focus>
          <!-- #endif -->
          <!-- #ifdef APP-NVUE -->
          <u--input placeholder="请输入创作者口令" focus>
            <!-- #endif -->
            <template #prefix>
              <u-icon name="search" color="#2979ff" size="28"></u-icon>
            </template>
            <template #suffix>

              <u-button type="primary" size="small" :text="'搜索'" style="padding-right: 0;"></u-button>
            </template>
            <!-- #ifndef APP-NVUE -->
        </u-input>
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        </u--input>
        <!-- #endif -->
        <view class="tips">温馨提示：口令可在作者主页或者评论区查看</view>
      </view>
    </view>
    <!-- 热门创作者 -->
    <view class="zjl_index_hot">
      <view class="text">热门创作者</view>
      <view class="df jc-c w100 header_png">
        <image src="https://i.ibb.co/3hTQmFt/20230529083909.jpg" :lazy-load="true" v-for="item in 5" :key="item" mode="widthFix"></image>
      </view>
    </view>
    <!-- 精选作品 -->
    <view class="zjl_index_selection">
      <view class="text">精选作品</view>
      <view class="df fw-w  content_image">
        <image src="https://i.ibb.co/PxKysqG/20230529083305.jpg" :lazy-load="true" v-for="item in 5" :key="item"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

onLoad(() => {
  console.log(" index --- onload");
});
</script>

<style scoped lang="scss">
.zjl_index {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  &_guide{
    // padding: 10rpx 20rpx;
    box-sizing: border-box;
  }

  &_search {
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    margin: 40rpx 0;
    .tips {
      margin-top: 6rpx;
      font-size: 24rpx;
      text-align: center;
    }
  }
  &_hot {
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    .text {
      margin: 0 0 16rpx 0;
      text-align: center;
    }
    .header_png {
      flex: 1;

      image {
        width: 100%;
        border-radius: 50%;
        margin: 0 10rpx;
      }
    }
  }
  &_selection {
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    width: 100%;
    .text {
      margin: 0 0 16rpx 0;
      text-align: center;
    }
    .content_image {
      image {
        // width: 31%;
        width: 220rpx;
        margin: 8rpx;
        height: 391rpx;
      }
    }
  }
}
</style>